<template>
  <div>
    <div id="model" class="model">
      <div v-loading="isLoading" class="wrapper">
        <View3D
          animationRepeatMode="none"
          annotationURL="https://xunjinasd.oss-cn-hangzhou.aliyuncs.com/app/space/33469e8a05d94b3183ca61d966f4c003_city-annotations.json"
          ref="view3dRef"
          src="https://xunjinasd.oss-cn-hangzhou.aliyuncs.com/app/space/a9b4b38076d843af94655cc394541dcb_city.glb"
          class="view3d"
          :pitch="13"
          :yaw="132"
          :zoom="35"
          :fov="45"
          :initialZoom="{ axis: 'x', ratio: 2 }"
          :autoplay="{ delayOnMouseLeave: 2000, pauseOnHover: true }"
          @ready="handleModelReady"
        ></View3D>
      </div>
    </div>
    <div class="slot">
      <slot></slot>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const isLoading = ref(true);
let view3d: any = {};
let timer: any;
let controlBar: any;
const view3dRef = ref();
import { RotateControl } from "@egjs/vue3-view3d";

const handleModelReady = (e: any) => {
  console.log(e);
  isLoading.value = false;
  view3d = e.target;
  //   const control = new RotateControl()
  // e.target.animator.play(0);
  // view3d.animator.play(0);
};
</script>

<style lang="scss" scoped>
.model {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 1;
}
.slot {
  position: relative;
  z-index: 10;
}
.view3d-wrapper {
  height: 100vh;
}
</style>
